<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<div class="title" style="background: #3296fa;">
				<el-icon class="icon"><el-icon-promotion /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
			</div>
			<div class="content">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">请选择人员</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-form-item label="选择要抄送的人员">
							<el-button type="primary" icon="el-icon-plus" round
								@click="selectHandle(1, form.nodeAssigneeList)">选择人员</el-button>
							<div class="tags-list">
								<el-tag v-for="(user, index) in form.nodeAssigneeList" :key="user.id" closable
									@close="delUser(index)">{{user.name}}</el-tag>
							</div>
						</el-form-item>
						<el-form-item label="">
							<el-checkbox v-model="form.userSelectFlag" label="允许发起人自选抄送人"></el-checkbox>
						</el-form-item>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>
<script setup lang="ts" name="ccnode">
	import { ref, watch, nextTick, inject, onMounted } from 'vue'
	import addNode from './addNode.vue' // 请根据实际路径调整

	// 注入
	const select = inject('select')

	// 定义 props
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		}
	})

	// 定义 emits
	const emit = defineEmits(['update:modelValue'])

	// 响应式状态
	const nodeConfig = ref({})
	const drawer = ref(false)
	const isEditTitle = ref(false)
	const form = ref({})
	const nodeTitle = ref(null) // 模板中需要 ref="nodeTitle"

	// 监听 props 变化
	watch(() => props.modelValue, (newVal) => {
		nodeConfig.value = newVal
	})

	// 生命周期钩子
	onMounted(() => {
		nodeConfig.value = props.modelValue
	})

	// 方法
	const show = () => {
		form.value = {}
		form.value = JSON.parse(JSON.stringify(nodeConfig.value))
		drawer.value = true
	}

	const editTitle = () => {
		isEditTitle.value = true
		nextTick(() => {
			nodeTitle.value.focus()
		})
	}

	const saveTitle = () => {
		isEditTitle.value = false
	}

	const save = () => {
		emit('update:modelValue', form.value)
		drawer.value = false
	}

	const delNode = () => {
		emit('update:modelValue', nodeConfig.value.childNode)
	}

	const delUser = (index) => {
		form.value.nodeAssigneeList?.splice(index, 1)
	}

	const selectHandle = (type, data) => {
		select(type, data)
	}

	const toText = (nodeConfig) => {
		if (nodeConfig.nodeAssigneeList?.length > 0) {
			return nodeConfig.nodeAssigneeList.map(item => item.name).join("、")
		} else {
			return nodeConfig.userSelectFlag ? "发起人自选" : false
		}
	}

	// 暴露给模板
	defineExpose({
		show
	})
</script>

<style>
</style>